<template>
  <div class="container">
    <el-dialog :title="titleInfo.text + titleInfo.pageTitle" :visible.sync="showDialog" :before-close="col" width="20%">
      <el-form
        :label-position="labelPosition"
        label-width="80px"
        :model="addForm"
        :rules="ruleInline"
        ref="dataForm"
        style="width: 80%;margin-left:10px;"
      >
        <el-form-item label="所属学科" prop="subjectID" v-if="!liststate">
          <el-select v-model="addForm.subjectID" placeholder="请选择" style="width:100%">
            <el-option v-for="item in formd" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目录名称" prop="tagName">
          <el-input v-model="addForm.tagName" placeholder="请输入目录名称" style="width:100%"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="addCancel">取消</el-button>
          <el-button type="primary" @click="addSubmit">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { simple } from '@/api/hmmm/subjects'
import { detail, add, update } from '@/api/hmmm/tags.js'
export default {
  name: 'TagsAdd',
  props: {
    id: {
      type: [Number, String],
      required: true
    },
    liststate: {
      type: Boolean,
      required: true
    },
    subjectID: {
      type: [Number, String],
      required: true
    },
    showDialog: {
      type: Boolean
    },
    titleInfo: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      labelPosition: 'right',
      addForm: {
        subjectID: '',
        tagName: ''
      },
      formd: [],
      // 表单验证
      ruleInline: {
        subjectID: [{ required: true, message: '请输入标签名称', trigger: 'change' }],
        tagName: [{ required: true, message: '请输入标签名称', trigger: 'blur' }]
      }
    }
  },
  created () {
    this.getsubjectslist()
  },
  methods: {
    async getsubjectslist () {
      try {
        const { data } = await simple()
        this.formd = data
      } catch (err) {
        this.$message.error('获取失败')
      }
    },
    // 点击取消按钮
    addCancel () {
      this.addForm = {
        subjectID: '',
        tagName: ''
      }
      this.$refs.dataForm.resetFields()
      this.$emit('close')
    },
    // 获取标签详情
    async getsubjects (id) {
      const { data } = await detail({ id: id })
      this.addForm = data
    },
    // 点击确定按钮
    addSubmit () {
      if (this.liststate) {
        this.addForm.subjectID = parseInt(this.subjectID)
      }
      this.$refs.dataForm.validate(async valid => {
        if (valid) {
          if (!this.id) {
            try {
              await add({
                subjectID: this.addForm.subjectID,
                tagName: this.addForm.tagName
              })
              this.$message.success('添加成功')
              this.$emit('close')
            } catch (err) {
              this.$message.error('添加失败')
            }
          } else {
            await update({
              id: this.id,
              subjectID: this.addForm.subjectID,
              tagName: this.addForm.tagName
            })
            this.$message.success('修改成功')
            this.$emit('close')
          }
        }
      })
      this.addCancel()
    },
    col () {
      this.addCancel()
    }
  }
}
</script>

<style scoped></style>
